<!DOCTYPE html>
 <html lang="en">
   ​
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>计算属性与监听器</title>
     <!-- 引入Vue.js -->

     <script src="js/vue.js"></script>

   </head>
   ​
   <body>
     ​
     <div id="app">
       数学：<input type="text" v-model="mathScore">
       英语：<input type="text" v-model="englishScore"><br>

       <!-- 注意：调用methods的方法一定要加括号 -->
       总分（methods方式）：<input type="text" v-model="sumScore()"><br>

       <!-- 注意：调用computed里面的方法不要加括号 -->
       总分（computed，纯get方式）：<input type="text" v-model="sumScore1"><br>
       总分（computed，get+set方式）：<input type="text" v-model="sumScore2">
       <h1>下面是set get部分
         <h1 />
         c语言 <input type="text" v-model="stu.cscore" />
         Java <input type="text" v-model="stu.javaScore" />
         mysql <input type="text" v-model="stu.mysqlScore" /><br />
         总分<input type="text" v-model="stu.total" />
         均分<input type="text" v-model="stu.avg" />
         禁止分<input type="text" :disabled="true" v-model="disabledScore" />
     </div>
     ​
     <script>
       var vm = new Vue({
         el: '#app',
         data: {
           disabledScore: 120,
           mathScore: 80,
           englishScore: 60,
           stu: {
             cscore: 0,
             javaScore: 0,
             mysqlScore: 0,
             set avg(val) {
               this.cscore = val;
               this.javaScore = val;
               this.mysqlScore = val;
             },
             get total() {
               return new Number(this.cscore) + new Number(this.javaScore) + new Number(this.mysqlScore);
             }
           }
         },
         methods: {
           sumScore: function() {
             console.log("methods方式调用！");
             return (this.mathScore - 0) + (this.englishScore - 0);
           }
         },
         computed: {
           // 默认是纯get方式，也是单项绑定
           sumScore1: function() {
             console.log("compute的纯get方式调用");
             return (this.mathScore - 0) + (this.englishScore - 0);
           },
           // 采用get加set方式
           sumScore2: {
             get: function() {
               console.log("compute的get方式调用");
               return (this.mathScore - 0) + (this.englishScore - 0);
             },
             // 当在输入框中更改了总分后，两项成绩就会分别取到新总分的平均值，从而实现双向绑定
             set: function(newValue) {
               console.log("compute的set方式调用");
               var avgScore = newValue / 2;
               this.mathScore = avgScore;
               this.englishScore = avgScore;
             }
           }
         }
       })
     </script>
     ​
   </body>
   ​
 </html>
